<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 利用递归函数求 1～n的阶乘 1*2 * 3 * 4 …n

      // 递归： 方法自己调用自己

      // 特点： 有退出条件  否则死循环

      // 1到n(5)的阶乘    5 * 4 * 3 * 2 * 1

      // function fn (n) {
      //   if (n === 1) {
      //     return 1;
      //   }
      //   return n * fn(n-1)
      // }

      // console.log(fn(5));

      // 第一调用fn时  n=5  5 * 4 * 3 * 2 * 1
      // 第二次调用fn  n=4
      // 第3次         n= 3
      // 第4次         n=2
      // 第5次         n1   1 * 1

      //

      // 商品信息
      var data = [
        {
          id: 1,
          name: "家电",
          children: [
            { id: 11, gname: "冰箱", children: [{ id: 111, gname: "海尔" }] },
            { id: 12, gname: "洗衣机" },
          ],
        },
        { id: 2, name: "服饰" },
      ];

      // 递归完成    根据输入的产品表示id   得到id下面所有产品

      let obj = {};
      function deep(data, id) {
        data.forEach((item) => {
          if (item.id == id) {
            obj = item;
          } else if (item.children && item.children.length) {
            deep(item.children, id);
          }
        });
        return obj;
      }







      console.log(deep(data, 1)); // 得到如下结构


      // 第一次调用

      //  obj = {
      //     id: 1,
      //     name: "家电",
      //     children: [
      //       { id: 11, gname: "冰箱", children: [{ id: 111, gname: "海尔" }] },
      //       { id: 12, gname: "洗衣机" },
      //     ],
      //   }









      // {
      //     id: 1,
      //     name: "家电",
      //     children: [
      //       { id: 11, gname: "冰箱", children: [{ id: 111, gname: "海尔" }] },
      //       { id: 12, gname: "洗衣机" },
      //     ],
      //   },

      // deep(data, 2); // 得到如下

      // { id: 2, name: "服饰" },

      // deep(data, 11); // 得到如下

      // { id: 11, gname: "冰箱", children: [{ id: 111, gname: "海尔" }] },
    </script>
  </body>
</html>
